<!-- 运费价格 -->
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#CD001B"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>

		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont1 }}</text>
				</view>
			</view>
			<view class="searchBox" v-show="showBtn">
				<view class="searchBoxL">
					{{ i18n.ctwfont12 }}
					<text style="color: #80B2FF;">: {{ customerCode }}</text>
				</view>
				<view class="searchBoxR">
					<uni-transition :mode-class="['fade', 'slide-top']" style="z-index: 99;" :show="searchDropDownShow">
						<view class="searchDropDown" v-show="searchDropDownShow">
							<view @tap="selectBtn(item)" class="searchDropDownList" v-for="item in searchDropDownList" :key="item">{{ item }}</view>
						</view>
					</uni-transition>

					<uni-easyinput
						type="text"
						:clearable="false"
						class="classInput"
						:inputBorder="true"
						v-model="searchValue"
						:placeholder="i18n.ctwfont13"
						@blur="searchDropDownShowBtn"
						@focus="searchDropDownHide"
						@input="searchValueInput"
					></uni-easyinput>
					<view class="tabTopBoxRText" @tap="searchValueBtn">
						<image style="width: 12px; height: 12px;" mode="scaleToFill" src="/static/icon/FAQ/2x/FAQ5@2x.png"></image>
					</view>
				</view>
			</view>
			<view class="TableTitle">{{ i18n.ctwfont3 }}</view>
			<v-table
				:columns="columns"
				:isShowth="true"
				:list="dataRowSpan"
				:td-height="50"
				border-color="#E7E7E7"
				:emptyText="i18n.ctwfont14"
				:span-method="arraySpanMethod"
			></v-table>
			<view class="TableTitle">{{ i18n.ctwfont4 }}</view>
			<v-table
				:columns="columns2"
				style="padding: 5px 0;"
				:isShowth="true"
				:td-height="50"
				:list="dataRowSpan2"
				border-color="#E7E7E7"
				:emptyText="i18n.ctwfont14"
				:span-method="arraySpanMethod"
			></v-table>
			<view class="TableTitlebz">{{ i18n.ctwfont10 }}</view>
			<view class="TableTitlebz">{{ i18n.ctwfont11 }}</view>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import vTable from '@/components/v-table/table.vue';
import { getStorage } from '@/utils/setStorage.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			back_k: 0,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			url: '/pages/home/index',
			// 客代号
			customerCode: '',
			//合并行
			dataRowSpan: [],
			dataRowSpan2: [],
			searchValue: '',
			searchDropDownList: [],
			searchDropDownShow: false,
			showBtn: false // 输入框隐藏显示
			// dataRowSpan: [
			// 	{
			// 		name: 'John Brown',
			// 		age: 18,
			// 		address: 'New York No. 1 Lake Park',
			// 		id: '1',
			// 		rowspan: 1
			// 	},
			// 	{
			// 		name: 'Jim Green',
			// 		age: 25,
			// 		address: 'London No. 1 Lake Parks',
			// 		id: '2',
			// 		rowspan: 1
			// 	},
			// 	{
			// 		name: 'Joe Black',
			// 		age: 30,
			// 		address: 'Sydney No. 1 Lake Park',
			// 		id: '3',
			// 		rowspan: 1
			// 	},
			// 	{
			// 		name: 'Jon Snowxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
			// 		age: 26,
			// 		address: 'Ottawa No. 2 Lake Park',
			// 		id: '4',
			// 		rowspan: 1,
			// 		nameCols: 2
			// 	}
			// ]
		};
	},
	onShow() {
		// this.getList();
		this.getShowBtn();
	},
	onLoad(option) {
		const { url } = option;
		// console.log(decodeURIComponent(url))
		this.url = url || '/pages/home/index';
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut, vTable },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('formPages');
		},
		columns() {
			const arr = [
				{
					title: this.$t('formPages').ctwfont2,
					key: 'productName'
				},
				{
					title: this.$t('formPages').ctwfont15,
					key: 'departureStation'
				},
				{
					title: this.$t('formPages').ctwfont6,
					key: 'seaPrice'
				},
				{
					title: this.$t('formPages').ctwfont7,
					key: 'pseaPrice'
				},
				{
					title: this.$t('formPages').ctwfont8,
					key: 'sseaPrice'
				}
			];
			return arr;
		},
		columns2() {
			const arr2 = [
				{
					title: this.$t('formPages').ctwfont2,
					key: 'productName'
				},
				{
					title: this.$t('formPages').ctwfont15,
					key: 'departureStation'
				},
				{
					title: this.$t('formPages').ctwfont6,
					key: 'ekPrice'
				},
				{
					title: this.$t('formPages').ctwfont7,
					key: 'pekPrice'
				},
				{
					title: this.$t('formPages').ctwfont8,
					key: 'sekPrice'
				}
			];
			return arr2;
		}
	},
	methods: {
		// 返回home
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: this.url
			});
			// #endif
			// #ifdef H5
			this.$Router.push(this.url);
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				let main = plus.android.runtimeMainActivity();
				if (this.back_k > 0) {
					this.back_k = 0;
					return main.moveTaskToBack(false);
					// return plus.runtime.quit();
				} else {
					const pages = getCurrentPages();
					if (pages.length === 1) {
						this.back_k++;
						setTimeout(() => {
							this.back_k--;
						}, 1000);
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: this.url
						});
						// #endif
						// #ifdef H5
						this.$Router.push(this.url);
						// #endif
						// uni.showToast({
						// 	title: '再按一次退出应用',
						// 	icon: 'none',
						// 	duration: 1000
						// });
					}
				}
			}
		},
		// 获取数据
		async getList() {
			const user = JSON.parse(getStorage('userconter'));
			let url = 'api/E3/priceInfo';
			const params = {
				customerCode: user.customerCode
			};
			if (this.showBtn) {
				params.searchCode = user.customerCode;
				url = 'api/customer/priceInfo/search';
			}
			const { data: res } = await this.$http(true, url, params, 'GET');
			if (res.errno === 0) {
				const languageFlag = getStorage('language') || 'th';
				var productNameBox = '';
				const arr = [];
				const arr2 = [];
				if (res.data && res.data.length > 0) {
					res.data.forEach(item => {
						if (languageFlag === 'zh') {
							productNameBox = item.productName;
						} else if (languageFlag === 'th') {
							productNameBox = item.productThaiName;
						} else {
							productNameBox = item.productEnglishName;
						}
						const obj = {
							productName: productNameBox,
							departureStation: item.departureStation == '广州' ? this.$t('formPages').ctwfont16 : this.$t('formPages').ctwfont17,
							seaPrice: item.seaPrice ? item.seaPrice + item.seaPriceUnit : '',
							pseaPrice: item.pseaPrice ? item.pseaPrice + item.pseaPriceUnit : '',
							sseaPrice: item.sseaPrice ? item.sseaPrice + item.sseaPriceUnit : ''
						};
						arr.push(obj);
						const obj2 = {
							productName: productNameBox,
							departureStation: item.departureStation == '广州' ? this.$t('formPages').ctwfont16 : this.$t('formPages').ctwfont17,
							ekPrice: item.ekPrice ? item.ekPrice + item.ekPriceUnit : '',
							pekPrice: item.pekPrice ? item.pekPrice + item.pekPriceUnit : '',
							sekPrice: item.sekPrice ? item.sekPrice + item.sekPriceUnit : ''
						};
						arr2.push(obj2);
					});
					this.dataRowSpan = arr;
					this.dataRowSpan2 = arr2;
				} else {
					this.dataRowSpan = [];
					this.dataRowSpan2 = [];
				}
				// this.cardArrList = res.data.list;
			} else {
				this.dataRowSpan = [];
				this.dataRowSpan2 = [];
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 下拉显示
		searchDropDownShowBtn() {
			this.searchDropDownShow = false;
		},
		// 下拉隐藏
		searchDropDownHide() {
			if (this.searchValue.length > 0) {
				this.searchDropDownShow = true;
			}
		},
		// input事件
		searchValueInput(e) {
			this.$nextTick(function() {
				if (e) {
					this.searchValue = e.toUpperCase();
					if (e.length > 0) {
						this.getCustomerCode();
					} else {
						this.searchDropDownShow = false;
					}
				} else {
					this.searchValue = '';
					this.searchDropDownShow = false;
				}
			});
		},
		// 下拉选中
		selectBtn(item) {
			this.searchValue = item;
			this.customerCode = item;
			this.searchValueBtn();
		},
		// 获取客户代号
		async getCustomerCode() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				searchCode: this.searchValue,
				customerCode: user.customerCode,
				functionCode: 'PRICE_INFO'
			};
			const { data: res } = await this.$http(true, 'api/customer/queryCustomerCode', params, 'GET');
			if (res.errno === 0) {
				if (res.data && res.data.length > 0) {
					const arr = res.data.slice(0, 6);
					this.searchDropDownList = arr;
					this.searchDropDownShow = true;
				}
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 搜索
		async searchValueBtn() {
			this.searchDropDownShow = false;
			if (this.searchValue && this.searchValue.length > 0) {
				const user = JSON.parse(getStorage('userconter'));
				const params = {
					customerCode: user.customerCode,
					searchCode: this.searchValue
				};
				const { data: res } = await this.$http(true, 'api/customer/priceInfo/search', params, 'GET');
				if (res.errno === 0) {
					const languageFlag = getStorage('language') || 'th';
					var productNameBox = '';
					const arr = [];
					const arr2 = [];
					if (res.data && res.data.length > 0) {
						res.data.forEach(item => {
							if (languageFlag === 'zh') {
								productNameBox = item.productName;
							} else if (languageFlag === 'th') {
								productNameBox = item.productThaiName;
							} else {
								productNameBox = item.productEnglishName;
							}
							const obj = {
								productName: productNameBox,
								departureStation: item.departureStation == '广州' ? this.$t('formPages').ctwfont16 : this.$t('formPages').ctwfont17,
								seaPrice: item.seaPrice ? item.seaPrice + item.seaPriceUnit : '',
								pseaPrice: item.pseaPrice ? item.pseaPrice + item.pseaPriceUnit : '',
								sseaPrice: item.sseaPrice ? item.sseaPrice + item.sseaPriceUnit : ''
							};
							arr.push(obj);
							const obj2 = {
								productName: productNameBox,
								departureStation: item.departureStation == '广州' ? this.$t('formPages').ctwfont16 : this.$t('formPages').ctwfont17,
								ekPrice: item.ekPrice ? item.ekPrice + item.ekPriceUnit : '',
								pekPrice: item.pekPrice ? item.pekPrice + item.pekPriceUnit : '',
								sekPrice: item.sekPrice ? item.sekPrice + item.sekPriceUnit : ''
							};
							arr2.push(obj2);
						});
						this.dataRowSpan = arr;
						this.dataRowSpan2 = arr2;
					} else {
						this.dataRowSpan = [];
						this.dataRowSpan2 = [];
					}
				} else {
					this.dataRowSpan = [];
					this.dataRowSpan2 = [];
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 获取输入框权限
		async getShowBtn() {
			const user = JSON.parse(getStorage('userconter'));
			const jurisdiction = JSON.parse(getStorage('jurisdiction'));
			if (jurisdiction.priceInfo == 0) {
				this.customerCode = user.customerCode;
			}
			const params = {
				customerCode: user.customerCode,
				functionCode: 'PRICE_INFO'
			};
			const { data: res } = await this.$http(true, 'api/customer/judgeShow', params, 'GET');
			if (res.errno === 0) {
				// if(res.data == '1') {
				// 	this.showBtn = true
				// 	this.searchValueBtn()
				// } else {
				// 	this.showBtn = false
				// 	this.getList()
				// }
				this.showBtn = res.data == '1' ? true : false;
				if (jurisdiction.priceInfo == 0) {
					this.getList();
				}
			} else {
				this.showBtn = false;
				if (jurisdiction.priceInfo == 0) {
					this.getList();
				}
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			if (this.showBtn) {
				this.searchValueBtn();
			} else {
				this.getShowBtn();
			}
		},
		arraySpanMethod(row, column, rowIndex, columnIndex) {
			if (column.key == 'name' && row.nameCols == 2) {
				return {
					rowspan: 1,
					colspan: 2.5
				};
			} else if (row.nameCols == 2 && column.key !== 'id') {
				return {
					rowspan: 1,
					colspan: 0
				};
			} else {
				return {
					rowspan: 1,
					colspan: 1
				};
			}
			// if (columnIndex == 0) {
			// 	if (row.rowspan) {
			// 		return {
			// 			rowspan: row.rowspan,
			// 			colspan: 1
			// 		};
			// 	} else {
			// 		return {
			// 			rowspan: 0,
			// 			colspan: 1
			// 		};
			// 	}
			// } else {
			// 	return {
			// 		rowspan: 1,
			// 		colspan: 1
			// 	};
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 30px;
	border: 1px solid #808080;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #CD001B;
		width: 100%;
	}
}
.zhuti {
	padding: 0 15px;
	box-sizing: border-box;
	.TableTitle {
		font-size: $uni-font-size-custom-d;
		font-weight: 700;
		padding-top: 15px;
		padding-bottom: 5px;
	}
	.TableTitlebz {
		font-size: $uni-font-size-custom-b;
		font-weight: 700;
		text-align: center;
		color: #d90211;
	}
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 100%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
		}
	}
	.searchBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		.searchBoxL {
			font-size: $uni-font-size-custom-d;
		}
		.searchBoxR {
			display: flex;
			border-radius: 3px;
			// overflow: hidden;
			position: relative;
			.classInput {
				width: 250rpx;
				height: 30px;
				line-height: 30px;
			}
			.tabTopBoxRText {
				padding: 0 10px;
				background-color: #CD001B;
				display: flex;
				justify-content: center;
				align-items: center;
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
			.searchDropDown {
				position: absolute;
				top: 30px;
				width: 250rpx;
				// height: 100px;
				background-color: #fff;
				z-index: 99;
				box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
				.searchDropDownList {
					font-size: $uni-font-size-custom-d;
					padding: 3px;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1; // 多行在这里修改数字即可
					overflow: hidden;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}
</style>
